<template name="ucenter">
	<view>
		 
		<!-- 用户信息 -->
		<view class="user">
			<!-- 头像 -->
			<view class="left">
				<image :src="user.face" @tap="toSetting"></image>
			</view>
			<!-- 昵称,个性签名 -->
			<view class="right">
				<view class="signature" v-if="!hasLogin">现在是未登录状态，点击按钮进行登录</view>
				<view class="username" v-else>现在是登录状态，{{userInfo.name}}</view>
				<!-- <view class="username" @tap="toLogin">{{uerInfo.userName}}</view>
				<view class="signature" @tap="toSetting">{{user.signature}}</view> -->
			</view>

		</view>
		<!-- 个人中心 -->
		<!-- <view class="cu-list menu sm-border ">
		 
			<view class="cu-item arrow sm-border  " @tap="toPage('../ucenter/setting')">
				<view class="content">
					<text class="cuIcon-people text-grey"></text>
					<text class="text-grey">个人信息</text>
				</view>
			</view> 
		</view> -->
		<!-- 工具栏 -->
	 	<view class="toolbar " style="margin-top: -50px;">
			<view class="title">我的工具栏</view>
			<view class="list">
				<view class="box" v-for="(row,index) in mytoolbarList" :key="index" @tap="toPage(row.url)">
					<view class="img">
						<image :src="row.img"></image>
					</view>
					<view class="text">{{row.text}}</view>
				</view>
			</view>
		</view> 
		<button class="submit margin-top " type="primary" @click="bindLogin">{{hasLogin ? '退出登录' : '登录'}}</button>
		
		<!-- 占位 -->
		<view class="place-bottom"></view>
	</view>
</template>
<script>
	import db from "@/common/db.js";
	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		name: "ucenter",
		data() {
			return {
				isfirst: true,
				headerPosition: "fixed",
				headerTop: null,
				statusTop: null,
				showHeader: true,
				//个人信息,
				user: {
					username: '游客101',
					face: '/static/img/user1.jpg',
					signature: '点击昵称跳转-登录/注册页',
					integral: 0,
					balance: 0,
					envelope: 0
				},
				// 工具栏列表
				mytoolbarList: [{
						url: '../../user/keep/keep',
						text: '历史记录',
						img: '/static/img/addr.png'
					},
					{
						url: '../ucenter/setting',
						text: '个人中心',
						img: '/static/img/bank.png'
					},
					{
						url: '../../user/coupon/coupon',
						text: '意见反馈',
						img: '/static/img/kefu.png'
					},
					{
						url: '../../user/coupon/coupon',
						text: '关于系统',
						img: '/static/img/renw.png'
					} 

				]
			}
		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			/* this.headerPosition = e.scrollTop>=0?"fixed":"absolute";
			this.headerTop = e.scrollTop>=0?null:0;
			this.statusTop = e.scrollTop>=0?null:-this.statusHeight+'px'; */
		},
		onLoad() {

			this.statusHeight = 0;
			// #ifdef APP-PLUS
			this.showHeader = false;
			this.statusHeight = plus.navigator.getStatusbarHeight();
			// #endif
			this.headerTop = 50;
			this.statusTop = 50;


		},
		onReady() {
			console.log('显示个人中心');
			const value = uni.getStorageSync('userInfo');
			console.log(uni.getStorageSync('userInfo'));
			//此处，演示,每次页面初次渲染都把登录状态重置
			/* 	uni.setStorage({
					key: 'UserInfo',
					data: false,
					success: function() {},
					fail: function(e) {}
				}); */
		},
		computed: mapState(['hasLogin', 'userInfo']),
		methods: {
			//消息列表
			toMsg() {
				uni.navigateTo({
					url: '../../msg/msg'
				})
			},
			toSetting() {
				uni.navigateTo({
					url: '../ucenter/setting'
				})
			},
			toLogin() {
				uni.navigateTo({
					url: '../login/login'
				})
				this.isfirst = false;
			},
			toPage(url) {
				if (!url) {
					uni.showToast({
						title: '模板未包含此页面',
						icon: "none"
					});
					return;
				}
				uni.navigateTo({
					url: url
				})
			},
			exit() {
				uni.showModal({
					title: '提示',
					content: '是否退出系统？',
					success: function(res) {
						if (res.confirm) {
							// 退出当前应用，改方法只在App中生效   
							plus.runtime.quit();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return true //return true的意思是禁止返回到上一个界面
			},
			...mapMutations(['logout']),
			bindLogin() {
				if (this.hasLogin) {
					this.exit();
					this.logout();
				} else {
					uni.navigateTo({
						url: '../login/login'
					})
				}
			}
			 
		}
	}
</script>
<style lang="scss">
	page {
		position: relative;
		background-color: #fff;
	}

	.status {
		width: 100%;
		height: 0;
		position: fixed;
		z-index: 10;
		background-image: linear-gradient(45deg, #0081ff, #0081ff);
		top: 0;
		/*  #ifdef  APP-PLUS  */
		height: var(--status-bar-height); //覆盖样式
		/*  #endif  */

	}

	.header {
		width: 92%;
		padding: 0 4%;
		height: 100upx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		position: fixed;
		top: 0;
		z-index: 10;
		/* background-color: #f06c7a; */
		background-image: linear-gradient(45deg, #0081ff, #0081ff);
		/*  #ifdef  APP-PLUS  */
		top: var(--status-bar-height);

		/*  #endif  */
		.icon-btn {
			width: 120upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;

			.icon {
				color: #fff;
				width: 60upx;
				height: 60upx;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-size: 42upx;
			}
		}
	}

	.place {
		background-image: linear-gradient(45deg, #0081ff, #0081ff);
		height: 100upx;
		/*  #ifdef  APP-PLUS  */
		margin-top: var(--status-bar-height);
		/*  #endif  */
	}

	.place-bottom {
		height: 300upx;
	}

	.user {
		width: 100%;
		padding: 0 4%;
		display: flex;
		align-items: center;
		// position: relative;
		background-image: linear-gradient(45deg, #0081ff, #0081ff);
		padding-bottom: 120upx;
		padding-top: 120upx;

		.left {
			width: 20vw;
			height: 20vw;
			flex-shrink: 0;
			margin-right: 20upx;
			border: solid 1upx #fff;
			border-radius: 100%;

			image {
				width: 20vw;
				height: 20vw;
				border-radius: 100%;
			}

		}

		.right {
			width: 100%;

			.username {
				font-size: 36upx;
				color: #fff;
			}

			.signature {
				color: #eee;
				font-size: 28upx;
			}
		}

		.erweima {
			flex-shrink: 0;
			width: 10vw;
			height: 10vw;
			margin-left: 5vw;
			border-radius: 100%;

			display: flex;
			justify-content: center;
			align-items: center;
			background: linear-gradient(to left, #fbbb37 0%, #fcf0d0 105%);

			.icon {
				color: #7b6335;
				font-size: 42upx;
			}
		}
	}

	.VIP {
		width: 84%;
		margin: -65upx auto 20upx auto;
		padding: 30upx 4%;
		background: linear-gradient(to left, #dea96d 0%, #f6d59b 100%);
		box-shadow: 0upx 0upx 25upx rgba(0, 0, 0, 0.2);
		border-radius: 15upx;
		display: flex;
		align-items: center;

		.img {
			flex-shrink: 0;
			width: 60upx;
			height: 60upx;

			image {
				width: 60upx;
				height: 60upx;
			}
		}

		.title {
			width: 100%;
			color: #796335;
			font-size: 30upx;
		}

		.tis {
			width: 100%;
			display: flex;
			justify-content: flex-end;
			color: #fcf0d0;
			font-size: 26upx;
		}
	}

	.toolbar {
		width: 92%;
		margin: 0 8% 0 4%;
		padding: 0 0 20upx 0;
		background-color: #fff;
		box-shadow: 0upx 0upx 25upx rgba(0, 0, 0, 0.1);
		border-radius: 15upx;

		.title {
			padding-top: 10upx;
			margin: 0 0 10upx 3%;
			font-size: 30upx;
			height: 80upx;
			display: flex;
			align-items: center;
		}

		.list {
			display: flex;
			flex-wrap: wrap;

			.box {
				width: 25%;
				margin-bottom: 30upx;

				.img {
					width: 23vw;
					height: 10.5vw;
					display: flex;
					justify-content: center;

					image {
						width: 9vw;
						height: 9vw;
					}
				}

				.text {
					width: 100%;
					display: flex;
					justify-content: center;
					font-size: 26upx;
					color: #3d3d3d;
				}
			}
		}
	}

	.submit {
		margin-top: 30px;
		margin-left: 20px;
		margin-right: 20px;
		color: white;
		background-color: rgba(0, 129, 255, 1.0);
		-webkit-tap-highlight-color: rgba(0, 129, 255, 1.0);

		&:active {
			color: #B6B6B6;
			background-color: rgba(0, 129, 255, 0.8);
		}
	}
</style>
